<template>
  <div>
    <Indexes @getSonger="getSonger"></Indexes>
    <HotSonger :songersImg="songersImg" :songersText="songersText"></HotSonger>
  </div>
</template>

<script>
import Indexes from "./Indexes"
import HotSonger from "./HotSonger"

import { getSonger } from "../../../network/home"

export default {
  name: "Songer",
  components: {
    Indexes,
    HotSonger
  },
  data() {
    return {
      songersImg: [],
      songersText: [],
      isload: false,
      offset: 0,
      limit: 60,
      initialId: null,
      typeId: null,
      areaId: null,
    }
  },
  mounted() {
    window.addEventListener('scroll', this.loadSonger, true); // 滚动到底部，再加载的处理事件
  },
  methods: {
    getSonger(offset, limit, initialId, typeId, areaId) {
      //判断用户有无点击分类 initidal type area
      if ((this.initialId == initialId) && (this.typeId == typeId) && (this.areaId == areaId)) {
        this.isload = true;
      } else {
        this.initialId = initialId;
        this.typeId = typeId;
        this.areaId = areaId;
        this.isload = false;
      }

      getSonger(offset, limit, initialId, typeId, areaId).then(res => {
        if (this.isload) {//判断是否为第一次请求
          for (let i = 0; i < res.data.artists.length; i++) {
            this.songersText.push(res.data.artists[i]);
          }
        } else {
          //console.log(res.data);
          this.songersImg = res.data.artists.slice(0, 12);
          this.songersText = res.data.artists.slice(12);
          this.isload = true;
        }
      }).catch(err => {
        console.log(err);
      })
    },
    loadSonger() {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动高度
      let clientHeight = document.documentElement.clientHeight;//可视部分高度
      let scrollHeight = document.documentElement.scrollHeight;//所有内容高度
      if (scrollTop + clientHeight + 1 >= scrollHeight) { // 滚动到底部，逻辑代码
        //事件处理
        this.offset += this.limit;
        this.limit = 30;
        this.getSonger(this.offset, this.limit, this.initialId, this.typeId, this.areaId);
      }
    }
  },
}
</script>

<style scoped>
</style>